<template>
  <div>
    <div
      class="face"
      :style="{
        'margin-top': marginTop + 'vh',
      }"
    >
      <el-card class="item">
        <template #header>
          <div class="title">
            <span>正面图片</span>
          </div>
        </template>
        <template #default> <div class="video">图片</div> </template>
      </el-card>

      <el-card class="item">
        <template #header>
          <div class="title">
            <span>侧面图片</span>
          </div>
        </template>

        <template #default> <div class="video">图片</div> </template>
      </el-card>

      <el-card class="item" v-if="glassesMeasureStatus == 2">
        <template #header>
          <div class="title">
            <span>提示</span>
          </div>
        </template>

        <el-scrollbar style="height: calc(70vh - 5rem)">
          <el-alert type="info" :closable="false" show-icon class="mb-2"
            >请观察图片内容是否对其指定位置</el-alert
          >
          <el-alert type="info" :closable="false" show-icon class="mb-2"
            >可拖动图片内的绿点进行调整</el-alert
          >
          <el-alert type="info" :closable="false" show-icon class="mb-2"
            >无异常方可点击下一步按钮</el-alert
          >
        </el-scrollbar>

        <div class="footer_btn w-full flex justify-end">
          <el-button type="primary" @click="startMeasure(2)"
            >重新测量</el-button
          >
          <el-button type="primary" @click="handleNextStep">下一步</el-button>
        </div>
      </el-card>
      <el-card class="item" v-else-if="3">
        <template #header>
          <div class="title">
            <span>测量结果</span>
          </div>
        </template>

        <el-scrollbar style="height: calc(70vh - 5rem)">
          <ul class="result_box">
            <el-row :gutter="24">
              <el-col
                v-for="item in 50"
                :key="item"
                :lg="12"
                class="h-[1.5rem] mb-1"
              >
                <div class="w-full h-full flex items-center">
                  <div>右眼瞳距:</div>
                  <div>6666</div>
                </div>
              </el-col>
            </el-row>
          </ul>
        </el-scrollbar>

        <div class="footer_btn w-full flex justify-end">
          <el-button type="primary" @click="startMeasure()">重新测量</el-button>
          <el-button type="primary" @click="handleNextStep">下一步</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox, ElLoading } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import { useUserStore } from "@/pinia";
import { storeToRefs } from "pinia";

onMounted(() => {
  marginTop.value = 70 / 50;
});

const useStore = useUserStore();
const { glassesMeasureStatus } = storeToRefs(useStore);

const router = useRouter();
// 重新测量
const startMeasure = () => {
  useStore.updateGlassesMeasureStatus(1);
};

// 下一步
// try_in_3D
const handleNextStep = () => {
  if (glassesMeasureStatus.value == 2) {
    useStore.updateGlassesMeasureStatus(3);
  } else {
    router.push("try_in_3D");
  }
};

// 根据屏幕尺寸，动态控制上边距
const marginTop = ref(7);
window.addEventListener("resize", () => {
  marginTop.value = 70 / 50;
});
</script>

<style scoped lang="scss">
.face {
  height: calc(100vh - 8.5rem) !important;
  @apply w-[99%]  mx-auto flex justify-between items-center;
  .item {
    @apply w-[33%] h-full relative;

    .title {
      @apply flex justify-center items-center text-[var(--theme-color)];
      span {
        @apply ml-1;
      }
    }

    .video {
      height: calc(100vh - 14rem);
      @apply w-full flex justify-center items-center;
    }

    .right-text {
      background-color: pink;
      @apply w-full  flex flex-col justify-between;
    }

    .result_box {
      @apply w-full flex  flex-wrap justify-between items-center;
      li {
        @apply w-[49%] h-[1.2rem] mb-1 bg-[pink] flex items-center;
      }
    }
    .footer_btn {
      @apply absolute bottom-0 right-0 w-full h-[2.5rem] px-[0.8rem] flex justify-end items-center;
    }
  }
  .item :deep(.el-card__header) {
    @apply py-[0.7rem];
  }
  .item :deep(.el-card__footer) {
    @apply py-[0.5rem] px-[0.5rem];
  }
}

:deep(.el-scrollbar__wrap) {
  overflow-x: hidden !important;
}

:deep(.el-scrollbar__bar.is-horizontal) {
  display: none !important;
}
</style>